<script setup lang="ts">
import { computed, ref } from 'vue'
import { taskActiveList, isActiveList, isUrgentList } from '../../utils/task'
import { useCountDown } from '@vant/use'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})
const taskType = computed(() => {
  let item = taskActiveList.find((e: any) => {
    return e.value == props.item.taskActive
  })
  return item
})

const isActive = computed(() => {
  let item = isActiveList.find((e: any) => {
    return e.value == props.item.isActive
  })
  return item
})
const isUrgent = computed(() => {
  let item = isUrgentList.find((e: any) => {
    return e.value == props.item.isUrgent
  })
  return item
})

// let nowTime = new Date().getTime()
// let callTime = new Date(props.item.callTime.replace(/-/g, '/')).getTime()
const getTime = function () {
  let times = props.item.callTime
  if (!times) return
  if (times == '0' || times == '') return ''

  if (times.indexOf('上午') > 0) times = times.replace('上午', '12:00:00')
  else if (times.indexOf('下午') > 0) times = times.replace('下午', '17:00:00')

  let date1 = new Date(times.replace(/-/g, '/'))
  let date2 = new Date()
  let cha = Math.abs(date1.getTime() - date2.getTime()) //获取 的时间差
  let day = Math.floor(cha / (24 * 60 * 60 * 1000))

  let hours = Math.floor((cha % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))

  return (
    '剩余 ' +
    "<span style='color:#ee0a24'>" +
    day +
    '</span>天' +
    "<span style='color:#ee0a24'>" +
    hours +
    '</span>小时'
  )
}

const encryptPhoneNumber = function (phoneNumber: string) {
  // 中国大陆手机号码是11位数字，通常以13, 14, 15, 16, 17, 18, 19开头
  // 这个正则表达式会匹配这些开头的数字，然后匹配接下来的4位数字，然后匹配接下来的4位数字
  var regex = /(\d{3})\d{4}(\d{4})/
  return phoneNumber.replace(regex, '$1****$2')
}
const { push } = useRouter()
const route = useRoute()
const gotoRoute = function () {
  push({
    name: 'followFeedback',
    query: {
      id: props.item.id,
      name: route.name?.toString()
    }
  })
}
</script>

<template>
  <div class="taskItem" @click="gotoRoute()">
    <div class="title">
      联系人：{{ item.merName }}
      <div class="merPhone">
        {{ encryptPhoneNumber(item.merPhone) }}
      </div>
    </div>
    <div class="info">
      <div class="infoItem">
        <span class="label">任务状态：</span
        ><van-tag :type="taskType?.type" round>{{ taskType?.label }}</van-tag>
      </div>
      <div class="infoItem">
        <span class="label">成交状态：</span
        ><van-tag :type="isActive?.type" round>{{ isActive?.label }}</van-tag>
      </div>
      <div class="infoItem">
        <span class="label">是否加急：</span
        ><van-tag :type="isUrgent?.type" round>{{ isUrgent?.label }}</van-tag>
      </div>
      <div class="infoItem" v-if="item.callTime">
        <span class="label">上门时间：</span>
        {{ item.callTime }} (<span v-html="getTime()"></span>)
      </div>
      <div class="infoItem">
        <span class="label">分配时间：</span>
        {{ item.created }}
      </div>
      <div class="infoItem">
        <span class="label">省 市 区：</span>
        {{ item.addressHead }}
      </div>
      <div class="infoItem">
        <span class="label">详细地址：</span>
        {{ item.address }}
      </div>
    </div>
    <div
      class="statusBox"
      v-if="item.isCall && item.isCall !== '0' && item.taskActive != '6' && item.isActive != '2'"
    >
      {{ item.isCall == '1' ? '急需处理' : item.isCall == '2' ? '已超时' : '正常' }}
    </div>
  </div>
</template>

<style lang="less" scoped>
.taskItem {
  border-radius: 6px;
  padding: 0 12px;
  background-color: var(--van-background-2);
  margin: 12px 0;
  box-shadow: var(--van-dropdown-menu-shadow);
  position: relative;
  .title {
    padding: 14px 0 12px 0;
    border-bottom: 1px solid var(--van-gray-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    .merPhone {
      background-color: var(--van-gray-4);
      padding: 2px 6px;
      border-radius: 15px;
      font-size: 12px;
    }
  }
  .info {
    padding: 12px 0;
    font-size: 14px;
    .label {
      color: var(--van-gray-6);
    }
  }
  .statusBox {
    position: absolute;
    color: var(--van-danger-color);
    font-weight: bold;
    height: 25px;
    width: 75px;
    border-radius: 14px;
    border: 2px solid var(--van-danger-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transform: rotate(25deg);
    right: 18px;
    top: 64px;

  }
}
</style>
